<template>
  <div class="container">
    <div>
      <a-space>
        <a-button type="primary" @click="addEntity">
          <template #icon><icon-plus-circle /></template>添加计划
        </a-button>
      </a-space>
      <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.entityObj">
        <template #columns>
          <a-table-column title="计划名称" data-index="title"></a-table-column>
          <a-table-column title="计划制定人" data-index="renyuan"></a-table-column>
          <a-table-column title="创建日期" data-index="createdate"></a-table-column>
          <a-table-column title="下发日期" data-index="submitdate"></a-table-column>
          <a-table-column title="计划开工时间" data-index="begindate"></a-table-column>
          <a-table-column title="计划完工时间" data-index="enddate"></a-table-column>
          <a-table-column title="操作" width="250">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" size="small" @click="viewEntity"><template #icon><icon-eye /></template>查看</a-button>
                <a-button type="primary" size="small" status="warning" @click=""><template #icon><icon-eye /></template>下发</a-button>
                <a-button type="primary" size="small" status="danger" @click=""><template #icon><icon-delete /></template>删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>

      <a-modal title="生产计划制定" v-model:visible="state.entityDetailVisible" :footer="false" width="1380px">
        <PlanDetail v-if="state.entityDetailVisible" v-model="state.entityDetailVisible"></PlanDetail>
      </a-modal>
      <a-modal title="生产计划详情" v-model:visible="state.entityViewVisible" :footer="false" width="1380px">
        <PlanView v-if="state.entityViewVisible" v-model="state.entityViewVisible"></PlanView>
      </a-modal>

      <ul>
        <li>
          生产计划和工序派工单是一个功能，都是按工序、按产品标识号等生成工序派工单，如果你有更好的实现方式，也可以。这里只是展示工序派工单生成时的一些要素
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
import { useRouter } from "vue-router";

const PlanDetail = defineAsyncComponent(() => import('@/views/product/plan/planDetail.vue'));
const PlanView = defineAsyncComponent(() => import('@/views/product/plan/planView.vue'));

const state = reactive({
  entityObj: [],
  entityDetailVisible : false,
  entityViewVisible : false
})
const loadList = ()=>{
  state.entityObj = [
    {id : 1,title:'贸2025-001合同产品锻压计划',  renyuan : '常乐',createdate:'2025-03-08 08:15', submitdate:'2025-03-08 08:30', begindate:'2025-03-09', enddate:'2025-03-12'},
    {id : 2,title:'贸2025-002合同产品锻压计划',  renyuan : '常乐',createdate:'2025-03-12 08:25', submitdate:'2025-03-12 08:37', begindate:'2025-03-14', enddate:'2025-03-18'},
  ]
}
const addEntity = ()=>{
  state.entityDetailVisible = true
}
const viewEntity = ()=>{
  state.entityViewVisible = true
}
onMounted(()=>{
  loadList();
})
onUnmounted(()=>{
})
</script>

<style scoped lang="less">
ul{
  color: #f60000; font-weight: bold;font-size: 16px;
  li{
    padding : 10px;
  }
}
</style>
